<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="dahuiji.css" />
	
</head>
<body>
	<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">超级困难</li>
				<li value="2">非常困难</li>
				<li value="3">比较困难</li>
				<li value="4">就选我吧</li>
			</ul>
	</div>
</body>
</html>
<script>
//	 角色：
//		 * 1.引擎
//		 * 		1. 选择
//		 * 			1》获取元素
//		 * 			2》添加事件
//		 * 			3》移除
//		 * 			4>记录游戏难度
//		 * 		2.加载
//		 * 			1》创建并添加logo
//		 * 			2>创建并添加loading
//		 * 			3>创置背景图运动
//		 * 			4》超时 - 清场 - 开始游戏
//		 * 		3.开始游戏
//		 * 			1》我主飞机入场
//		 * 			2》开火
//		 * 			3》创建敌机
//		 *		4.设置敌机概率
//		 * 2.我方飞机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.开火（注意频率）
//		 * 		5.数组（记录创建的子弹）
//		 * 3.子弹
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.爆炸（注意清除子弹和数组中的子弹）
//		 * 4.敌机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置定位
//		 * 		4.设置运动 
//		 * 		5.碰撞检测
//		 */
 
   window.onload = function(){
   	  new Engine();
   }
   //实例
   function Engine(){
   	this.ele = document.getElementById("body_main");
   	this.oUlls = document.getElementsByTagName("li");
   	this.init();
   }
   //原型
   //引擎
   Engine.prototype = {
   	init: function(){
   		var that = this;
   		for(var i = 0;i < this.oUlls.length;i ++){
   			this.oUlls[i].onclick = function(){
   				this.parentNode.remove(this);
   				that.loadPage();
   				that.frequecy = this.index;
   			}
   		}
   	},
   	loadPage: function(){
   		this.logo = createEle("div","logo");
   		appendBody(this.logo);
   		this.loading = createEle("div","loading");
   		appendBody(this.loading);
   		var that = this;
   		var index = 1;
   		this.loadingTimer = setInterval(function(){
   			that.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
   		},500);
   		var positionY = 0;
   		setInterval(function(){
   			that.ele.style.backgroundPositionY = ++positionY + "px";
   		},50);
   		setTimeout(function(){
   			that.logo.remove();
   			that.loading.remove();
   			clearInterval(that.loadingTimer);
   			that.startGame();
   		},3000)
   	},
   	startGame : function(){
   		Plane.init();
   		Plane.fire(this.frequecy)
   		this.createEnemy();
   	},
   	//敌机创建的型号在引擎里面选好
   	createEnemy : function(){
   		setInterval(function(){
   			Math.random() > 0.5 ? new Enemy(0) : "";
   		},1000)
   		setInterval(function(){
   			Math.random() > 0.3 ? new Enemy(1) : "";
   		},2000)
   		setInterval(function(){
   			Math.random() > 0.2 ? new Enemy(2) : "";
   		},4000)
   	}
   }
   //创建飞机对象 键值对
   var Plane = {
   	ele: createEle("div","my-warplain"),
   	init: function(){
   		appendBody(this.ele);
   		this.ele.style.left = document.documentElement.clientWidth/2 - this.ele.offsetWidth / 2 + "px";
   		this.ele.style.top =  document.documentElement.clientHeight -this.ele.offsetHeight + "px";
   		this.sport();
   	},
   	sport : function(){
   		var body_main =document.getElementById("body_main");
   		var that = this;
   		document.onmousemove = function(evt){
   			var e =evt || window.event;
   			var left = e.pageX - that.ele.offsetWidth / 2 ;
   			var top = e.pageY - that.ele.offsetHeight / 2 ;
   			if(left <= body_main.offsetWidth){
   				left = body_main.offsetWidth;
   			}else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
   				left = body_main.offsetLeft + body_main.offsetWidth - that.offsetWidth;
   			}
   			that.ele.style.left = left + "px";
   			that.ele.style.top = top + "px";
   		}
   	},
   	fire : function(frequecy){
   		var defaultFrequecy = 200;
   		switch(frequecy){
   			case 0 : defaultFrequecy = 500; break;
   			case 1 : defaultFrequecy = 300; break;
   			case 2 : defaultFrequecy = 200; break;
   			case 3 : defaultFrequecy = 50;
   		}
   		//给子弹编号
   		var id = 0;
   		var that = this;
   		setInterval(function(){
   			that.bullet.push(new Bullet(id));
   		},defaultFrequecy);
   	},
   	bullet: []
   }
   //创建子弹
   function Bullet(id){
     this.id = id;
   	 this.ele = createEle("div","bullet");
   	 this.init();
   }
   Bullet.prototype = {
   	 init: function(){
   	 	this.ele.id = this.id;
   	 	appendBody(this.ele);
   	 	this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth/2 - this.ele.offsetWidth/2+ "px";
   	 	this.ele.style.top = Plane.ele.offsetTop  - this.ele.offsetHeight + "px";
   	 	this.sport();
   	 },
   	 sport: function(){
   	 	var that = this;
   	 	this.timer = setInterval(function(){
   	 		that.ele.style.top = that.ele.offsetTop - 10 + "px";
   	 		if(that.ele.offsetTop <= 10){
   	 			that.boom();
   	 		}
   	 	},50)
   	 },
   	 boom : function(){
   	 	this.ele.className = "bullet_die";
   	 	clearInterval(this.timer);
   	 	//为防止爆炸有图片，加一个延时计时器
   	 	var that = this;
   	 	setTimeout(function(){
   	 		that.ele.remove();
   	 		for(var i = 0;i < Plane.bullet.length;i ++){
   	 			if(that.ele.id == Plane.bullet[i].id){
   	 				Plane.bullet.splice(i,1);
   	 			}   	 			
   	 		}
   	 	},50)
   	 	
   	 }
   }
   //创建敌机
   function Enemy(type){
   	this.type = type;
   	this.init();
   }
   Enemy.prototype = {
   	init : function(){
   		switch(this.type){
   			case 0 : this.ele = createEle("div","enemy-small");
   			         this.ps = 1;
   			         this.speed = 20;
   			         break;
   			case 1 : this.ele = createEle("div","enemy-middle");
   			         this.ps = 5;
   			         this.speed = 10;
   			         break;
   			case 2 : this.ele = createEle("div","enemy-large");
   			         this.ps = 20;
   			         this.speed = 5;   			         
   		}
   	        appendBody(this.ele);
   	        this.position();
   	},
   	position : function(){
   		var body_main = document.getElementById("body_main");
   		this.ele.style.left = randInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
   		this.ele.style.top = 0;
   		this.sport();
   	},
   	sport : function(){
   		var that = this;
   		this.timer = setInterval(function(){
   			that.ele.style.top = that.ele.offsetTop + that.speed + "px";
   			if(that.ele.style.top >= document.documentElement.clientHeight){
   				that.ele.remove();
   				clearInterval(that.timer);
   			}
   			that.collision();
   		},50)
   	},
   	//碰撞检测
   	collision : function(){
   		var that = this;
   		for(var i = 0;i < Plane.bullet.length;i ++){
   			if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < that.ele.offsetLeft || that.ele.offsetLeft + that.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
   				if(!(Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < that.ele.offsetTop || that.ele.offsetTop + that.ele.offsetHeight < Plane.bullet[i].ele.offsetTop)){
   					Plane.bullet[i].boom();
   					that.ps --;
   					if(that.ps < 0){
   						that.ele.remove();
   					}
   				}
   			}
   		}
   	}
   }
   Element.prototype.remove = function(){
   	   this.parentNode.removeChild(this);
   }
   function createEle(target,className){
   	  var ele = document.createElement(target);
   	  ele.className = className;
   	  return ele;
   }
   function appendBody(ele){
   	document.body.appendChild(ele);
   }
   function randInt(min,max){
   	return Math.floor(Math.random()*(max - min + 1) + min);
   }
</script>